<template>
  <div
    class="divider"
    :class="{
      'divider--horizontal': direction === 'horizontal',
      'divider--vertical': direction === 'vertical',
    }"
    :style="{
      display: direction === 'horizontal' ? 'block' : 'inline-block',
      margin: margin || (direction === 'horizontal' ? '10px 0' : '0 10px'),
      borderTop: direction === 'horizontal' ?  `1px ${borderStyle} ${color}` : 'none',
      borderLeft: direction === 'vertical' ?  `1px ${borderStyle} ${color}` : 'none',
    }"
  ></div>
</template>

<script>
export default {
  name: 'Divider',
  props: {
    color: {
      type: String,
      default: '#ccc',
    },
    direction: {
      type: String,
      default: 'horizontal',
      validate: (val) => {
        return ['horizontal', 'vertical'].includes(val)
      }
    },
    margin: {
      type: String,
    },
    borderStyle: {
      type: String,
      default: 'solid',
      validate: (val) => {
        return [
          'none', 'hidden', 'dotted', 'dashed',
          'solid', 'double', 'groove', 'ridge',
          'inset', 'outset'
        ].includes(val)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.divider {
  &--horizontal {
    width: 100%;
    height: 1px;
    @media (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(.5);
    }
    @media (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(.3333);
    }
  }
  &--vertical {
    width: 1px;
    height: 1em;
    vertical-align: middle;
    @media (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleX(.5);
    }
    @media (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleX(.3333);
    }
  }
}
</style>
